<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard</title>

	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="js/jquery.mousewheel.js"></script>
	<script src="js/jquery.keyboard.extension-typing.js"></script>
	<script src="js/jquery.keyboard.extension-autocomplete.js"></script>

	<!-- demo only -->
	<link href="demo/demo.css" rel="stylesheet" >
	<script src="demo/demo.js"></script>
	<script src="http://mottie.github.com/Jatt/js/jquery.jatt.min.js"></script> <!-- tooltips -->

	<!-- theme switcher -->
	<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

</head>

<body>

<div id="page-wrap">

	<!-- Links to other demo pages & docs -->
	<div id="nav">
		<a class="current" href="index.html">Main Demo</a>
		<a href="basic.html">Basic Demo</a>
		<a href="layouts.html">Language Demos</a>
		<a href="calculator.html">Calculator Demo</a>
		<a class="play" href="http://jsfiddle.net/Mottie/Qs2V2/">Playground</a>
		<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
		<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
		<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a>
	</div>
	<!-- End Links -->

	<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a></h1>
	<h4>Original by 
		<a href="http://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>, 
		updated &amp; maintained by <a href="http://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
	</h4>

	<div id="switcher"></div>
	<ul id="console">
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
<h3>Click on the keyboard title, then scroll down to see its code</h3>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">QWERTY Text</span></h2>
		<input class="qwerty" type="text" placeholder="Enter something...">
		<br>
		<small>
			* placeholder (watermark).<br>
			* autocomplete.
		</small>
		<div class="code ui-corner-all" style="width: 585px; height: 365px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;input class="qwerty" type="text" placeholder="Enter something..."&gt;

<span class="ct">Script
=======</span>
<span class="comment">// Autocomplete demo</span>
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
 "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
 "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

$('.qwerty:eq(0)')
 .keyboard({ layout: 'qwerty' })
 .autocomplete({
  source: availableTags
 })
 .addAutocomplete()
 .addTyping();</code></pre>
		</div>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">QWERTY Password</span> <img id="passwd" class="tooltip" title="Click to open the virtual keyboard" src="demo/keyboard.png"></h2>
		<input class="qwerty" type="password">
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;input class="qwerty" type="password"&gt;

<span class="ct">Script
=======</span>
$('.qwerty:eq(1)')
 .keyboard({ 
  openOn : null,
  layout : 'qwerty'
 })
 .addTyping();
$('#passwd').click(function(){
 $('.qwerty:eq(1)').getkeyboard().reveal();
});</code></pre>
		</div>
		<br>
		<small>
			* Click icon to open keyboard.<br>
			* Stay open until accept/cancel.<br>
			* Key hover disabled in this type.
		</small>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">QWERTY Text Area</span></h2>
		<textarea class="qwerty"></textarea>
		<br>
		<small>
			* locked input (no manual input).<br>
			* position the hidden caret!
		</small>
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea class="qwerty"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('.qwerty:eq(2)')
 .keyboard({
  layout   : 'qwerty',
  lockInput: true <span class="comment">// prevent manual keyboard entry</span>
 })
 .addTyping();</code></pre>
		</div>
	</div>

	<br class="clear">

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">International</span> <img id="inter-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
		<textarea id="inter"></textarea>
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="inter"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('#inter')
 .keyboard({ layout: 'international' })
 .addTyping();

<span class="ct">Script - typing extension
=======</span>
$('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);</code></pre>
		</div>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Alphabetical</span></h2>
		<textarea id="alpha"></textarea>
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="alpha"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('#alpha')
 .keyboard({ layout: 'alpha' })
 .addTyping();</code></pre>
		</div>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Dvorak</span></h2>
		<textarea id="dvorak"></textarea>
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('#dvorak')
 .keyboard({ layout: 'dvorak' })
 .addTyping();</code></pre>
		</div>
	</div>

	<br class="clear">

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Num Pad</span></h2>
		<input id="num" class="alignRight" type="text">
		<div class="code ui-corner-all" style="width: 745px; height: 285px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;input id="num" class="alignRight" type="text"&gt;

<span class="ct">Script
=======</span>
$('#num')
 .keyboard({
  layout : 'num',
  restrictInput : true, <span class="comment">// Prevent keys not in the displayed keyboard from being typed in</span>
  preventPaste : true,  <span class="comment">// prevent ctrl-v and right click</span>
  autoAccept : true
 })
 .addTyping();</code></pre>
		</div>
		<br>
		<small>
			* input restricted.<br>
			* pasting (ctrl-v) not allowed.<br>
			* auto accept content.
		</small>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Custom: Hex</span></h2>
		<input id="hex" type="text">
		<div class="code ui-corner-all" style="width: 740px; height: 420px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;input id="hex" type="text"&gt;

<span class="ct">Script
=======</span>
$('#hex')
 .keyboard({
  layout: 'custom',
  customLayout: {
   'default' : [
    'C D E F',
    '8 9 A B',
    '4 5 6 7',
    '0 1 2 3',
    '{bksp} {a} {c}'
   ]
  },
  maxLength : 6,
  restrictInput : true, <span class="comment">// Prevent keys not in the displayed keyboard from being typed in</span>
  useCombos : false <span class="comment">// don't want A+E to become a ligature</span>
 })
 .addTyping();</code></pre>
		</div>
		<br>
		<small>
			* maxLength = 6.<br>
			* input restricted.
		</small>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Custom: Meta Sets</span> <img id="meta-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
		<textarea id="meta"></textarea>
		<div class="code ui-corner-all" style="width: 740px; height: 420px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="meta"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('#meta')
 .keyboard({
  layout: 'custom',
  display: {
   'alt'    : 'AltGr:It\'s all Greek to me',
   'meta1'  : '\u2666:russian lower-case', <span class="comment">// Diamond with label that shows in the title (spaces are okay here)</span>
   'meta2'  : '\u2665:RUSSIAN upper-case', <span class="comment">// Heart</span>
   'meta3'  : '\u2663:zodiac',             <span class="comment">// Club</span>
   'meta99' : '\u2660:numbers'             <span class="comment">// Spade</span>
  },
  customLayout: {
   'default' : [
    <span class="comment">// Add labels using a ":" after the key's name and replace spaces with "_"
    // without the labels this line is just 'a b c d e f g'</span>
    'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'shift' : [
    'A B C D E F G',
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'alt' : [ 
    '\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', <span class="comment">// lower case Greek</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'alt-shift' : [
    '\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', <span class="comment">// upper case Greek</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'meta1' : [
    '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', <span class="comment">// lower case Russian</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'meta2' : [
    '\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', <span class="comment">// upper case Russian</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'meta3' : [
    '\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', <span class="comment">// Zodiac</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ],
   'meta99' : [
    '1 2 3 4 5 6 7', <span class="comment">// only because I ran out of ideas</span>
    '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
    '{bksp} {sp:1} {accept} {cancel}'
   ]
  }
 })
 .addTyping();

<span class="ct">Script - typing extension
=======</span>
var meta = $('#meta').getkeyboard();
meta.reveal().typeIn('aBcD11123\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</code></pre>
		</div>
	</div>

	<br class="clear">

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Custom: Junk</span></h2>
		<textarea id="junk"></textarea>
		<div class="code ui-corner-all" style="width: 745px; height: 285px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="junk"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
$('#junk')
 .keyboard({
  layout: 'custom',
  customLayout: {
   'default' : [
    'a e i o u y c',
    '` \' " ~ {sp:1} {dec}',
    '{tab} {enter} {bksp}',
    '{space}',
    '{accept} {cancel} {shift}'
   ],
   'shift' : [
    'A E I O U Y C',
    '` \' " ~ {sp:1} {dec}',
    '{t} {sp:1} {e} {sp:1} {b}',
    '{space}',
    '{a} {sp:1} {c} {sp:1} {s}'
   ]
  },
  <span class="comment">// Part of the standard combos - added here as an example</span>
  combos : {
   'a' : { e: '\u00e6' },
   'A' : { E: '\u00c6' }
  },
  <span class="comment">// example callback function</span>
  accepted : function(e, el){ alert('The content "' + el.value + '" was accepted!'); }
 })
 .addTyping();</code></pre>
		</div>
		<br>
		<small>
			* use shift key - see action key sizes.<br>
			* use the decimal - only one allowed.<br>
			* type in 'ae' and other combo keys.<br>
			* accept content to see the callback.
		</small>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Custom: Mapped Keys</span></h2>
		<textarea id="map"></textarea>
		<div class="code ui-corner-all" style="width: 745px; height: 285px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;textarea id="map"&gt;&lt;/textarea&gt;

<span class="ct">Script
=======</span>
<span class="comment">// *** Mapped keys ***</span>
$('#map').keyboard({
 layout: 'custom',
 customLayout: {
  'default' : [ 
   <span class="comment">// "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")</span>
   '\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03b3(c):lower_case_gamma_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b7(g):lower_case_eta_(type_g)', <span class="comment">// lower case Greek</span>
   '{shift} {accept} {cancel}'
  ],
  'shift' : [
   '\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', <span class="comment">// upper case Greek</span>
   '{shift} {accept} {cancel}'
  ]
 },
 usePreview: false <span class="comment">// no preveiw</span>
});</code></pre>
		</div>
		<br>
		<small>
			* No preview window.<br>
			* Type in a-g.<br>
			* Type in A-G (shifted).<br>
		</small>
	</div>

	<div class="block">
		<h2><span class="tooltip" title="Click to see code">Custom: Hidden</span></h2>
		<a href="#" class="hiddenInput">Hidden input</a>
		<!-- DON'T use type="hidden" because IE doesn't like hidden inputs -->
		<input id="hidden" type="text" style="display:none;">
		<div class="code ui-corner-all" style="width: 350px; height: 200px;">
			<pre><code><span class="ct">HTML
=======</span>
&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
<span class="comment">&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;</span>
&lt;input id="hidden" type="text" style="display:none;"&gt;

<span class="ct">Script
=======</span>
<span class="comment">// *** Hidden input example ***
// click on a link - add focus to hidden input</span>
$('.hiddenInput').click(function(){
 $('#hidden').trigger('focus.keyboard');
 return false;
});
<span class="comment">// Initialize keyboard script on hidden input
// set "position.of" to the same link as above</span>
$('#hidden')
 .keyboard({ 
  layout   : 'qwerty',
  position : {
   of : $('.hiddenInput'),
   my : 'center top',
   at : 'center top'
  }
 })
 .addTyping();</code></pre>
		</div>
	</div>

	<br class="clear">

	<div id="showcode"></div>

	<div id="footer"></div>

</div>

</body></html>